<template>
  <div>
    <!-- 顶部搜索区域 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="入库单编号">
        <el-input v-model="searchForm.gatherOrderNumber" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item label="审核进度">
        <el-select v-model="searchForm.status" placeholder="请选择">
          <el-option label="等待审核" value="S001-1"></el-option>
          <el-option label="未通过" value="S001-2"></el-option>
          <el-option label="已通过" value="S001-3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请时间">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="开始日期" v-model="searchForm.startDate" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col :span="1" class="line" style="text-align: center">至</el-col>
        <el-col :span="11">
          <el-date-picker type="date" placeholder="结束日期" v-model="searchForm.endDate" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格区域 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="gatherOrderNumber" label="入库单编号" width="180" align="center"></el-table-column>
      <el-table-column prop="reason" label="入库理由" width="185" align="center"></el-table-column>
      <el-table-column prop="totalAmount" label="入库总数(件)" width="180" align="center"></el-table-column>
      <el-table-column prop="totalPrice" label="总金额(元)" width="180" align="center"></el-table-column>
      <el-table-column prop="register" label="登记人" width="180" align="center"></el-table-column>
      <el-table-column prop="registerTime" label="登记时间" width="200" align="center"></el-table-column>
      <el-table-column prop="status" label="审核进度" width="190" align="center">
        <template slot-scope="scope">
          {{ getCheckTagText(scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleReview(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"      style="margin-top: 20px; text-align: right;"
    ></el-pagination>

    <!-- 对话框区域 -->
    <el-dialog :visible.sync="dialogVisible" width="80%" top="5vh">
      <div style="text-align: center">
        <h1>入库单(审核)</h1>
      </div>
      <div class="review-content">
        <div style="margin-bottom: 20px;">
          <el-row>
            <el-col :span="24" style="text-align: right">
              <el-button type="danger" plain  class="el-icon-check"> 拒绝请求</el-button>
              <el-button @click="submitReview" type="success"  class="el-icon-check"> 通过审核</el-button>
              <el-button type="danger" class="el-icon-refresh"> 返回</el-button>
            </el-col>
          </el-row>
        </div>
        <el-form label-width="100px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="入库单编号:">
                {{ orderInfo.gatherOrderNumber }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="总数量:">
                {{ orderInfo.totalAmount }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="总价格:">
                {{ orderInfo.totalPrice }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="申请人:">
                {{ orderInfo.payer}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="申请时间:">
                {{ orderInfo.registerTime }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="productTableData" style="width: 100%;height: 300px">
          <el-table-column type="index" label="序号" width="80" align="center">
            <template slot-scope="scope">
              {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="图片" align="center">
            <template slot-scope="scope">
              <img :src="'/img'+scope.row.image" alt="商品图片" style="width: 50px; height: 50px;">
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="wareHouse" label="入货仓库" align="center"></el-table-column>
          <el-table-column prop="supplier" label="商品供应商" align="center"></el-table-column>
          <el-table-column prop="price" label="单价(元)" align="center"></el-table-column>
          <el-table-column prop="count" label="数量(件)" align="center"></el-table-column>
          <el-table-column prop="subTotal" label="小计(元)" align="center"></el-table-column>
        </el-table>
        <el-form ref="reviewForm" :model="reviewForm" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="审核人:" prop="reviewer">
                <el-input style="width: 200px" v-model="reviewForm.reviewer" placeholder="请输入审核人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="审核时间:">
                <el-input style="width: 200px" v-model="reviewForm.reviewerTime"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="审核理由:" prop="reason">
                <el-input type="textarea" v-model="reviewForm.reason" placeholder="请输入理由" maxlength="50" show-word-limit></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "warehousing",
    components: {},
    props: {},
    data() {
      return{
        searchForm: {
          gatherOrderNumber: "",
          status: "",
          startDate: "",
          endDate: ""
        },
        orderInfo: {
          payOrderNumber: "",
          totalAmount: "",
          register: "",
          registerTime: "",
          totalPrice: ""
        },
        productTableData: [
          {
            productId: "",
            image: "",
            name: "",
            wareHouse: "",
            supplier: "",
            price: "",
            count: "",
            subTotal: ""
          }
        ],
        tableData: [
          {
            gatherId: "",
            gatherOrderNumber: "",
            reason: "",
            totalAmount: 0,
            totalPrice: "",
            register: "",
            registerTime: "",
            status: ""
          }
        ],
        reviewForm: {
          reviewer: '',
          reason: '',
          reviewerTime: ''
        },
        reviewData: {},
        currentPage: 1,
        pageSize: 5,
        total: 0,
        dialogVisible: false, // 新增：控制对话框显示
        reviewRules: {
          reviewer: [
            { required: true, message: '请输入审核人', trigger: 'blur' }
          ],
          reason: [
            { required: true, message: '请输入审核理由', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      initTable(){
        Object.assign(this.searchForm, {"currentPage": this.currentPage, "pageSize": this.pageSize, "CheckTage": "S001-1"});
        console.log(this.searchForm);
        this.$axios.post("http://localhost:8090/gather/gatherReview", this.searchForm).then(({ data }) => {
          console.log(data);
          this.total = data.total;
          this.tableData = data.records.map(item => ({
            gatherId: item.gatherId,
            gatherOrderNumber: item.gatherOrderNumber,
            reason: item.checkReason,
            totalAmount: item.totalAmount,
            totalPrice: item.totalPrice +"元",
            register: item.register,
            registerTime: item.registerTime,
            status: item.checkTag
          }));
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '初始化失败!'
          });
        });
      },
      //查询按钮
      onSearch() {
        console.log("查询");
        this.selectInitTbl();
      },
      //条件查询
      selectInitTbl() {
        Object.assign(this.searchForm, {"currentPage": this.currentPage, "pageSize": this.pageSize});
        console.log(this.searchForm);
        this.$axios.post("http://localhost:8090/gather/gatherReview2", this.searchForm).then(({ data }) => {
          console.log(data);
          this.tableData = data.records.map(item => ({
            gatherOrderNumber: item.gatherOrderNumber,
            reason: item.checkReason,
            totalAmount: item.totalAmount,
            totalPrice: item.totalPrice +"元",
            register: item.register,
            registerTime: item.registerTime,
            status: item.checkTag
          }));
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '初始化失败!'
          });
        });
      },
      //重置按钮
      onReset() {
        this.form = {
          outboundId: "",
          status: "",
          startDate: "",
          endDate: ""
        };
      },
      //点击审核弹出对话框
      handleReview(row) {
        console.log("审核", row);
        this.reviewData = row;
        this.orderInfo = {
          gatherOrderNumber: row.gatherOrderNumber,
          totalAmount: row.totalAmount,
          register: row.register,
          registerTime: row.registerTime,
          totalPrice: row.totalPrice
        };
        this.$axios.get("http://localhost:8090/gather-details/"+row.gatherId).then(({ data }) => {
          console.log(data);
          this.productTableData = data.map(item => ({
            productId: item.product.productId,
            image: item.product.imgLink,
            name: item.product.name,
            wareHouse: "生鲜仓库",
            supplier: item.supplier.companyName,
            price: item.price,
            count: item.amount,
            subTotal: item.subTotal
          }))
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '初始化失败!'
          });
        });
        this.dialogVisible = true;
      },
      submitReview() {
        console.log('提交审核:', this.reviewData);
        // 添加审核人和审核理由的非空验证
        if (!this.reviewForm.reviewer) {
          this.$message({
            type: 'warning',
            message: '请输入审核人'
          });
          return;
        }
        if (!this.reviewForm.reason) {
          this.$message({
            type: 'warning',
            message: '请输入审核理由'
          });
          return;
        }
        this.$confirm('你是否要通过审核?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            // 提交审核逻辑
            console.log('审核通过', this.reviewData, this.reviewForm);
            Object.assign(this.reviewForm, {"gatherOrderNumber": this.reviewData.gatherOrderNumber})
            this.$axios.post("http://localhost:8090/gather/review",this.reviewForm).then(({ data }) => {
              console.log(data);
              if(data){
                this.$message({
                  type: 'success',
                  message: '审核成功!'
                });
                this.reviewForm = {
                  reviewer: '',
                  reason: '',
                  reviewerTime: ''
                };
                this.initTable();
                this.dialogVisible = false; // 隐藏弹出框
              }else{
                this.$message({
                  type: 'error',
                  message: '审核失败!'
                });
              }
            });
        });
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.initTable();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.initTable();
      },
      getCheckTagText(checkTag) {
        switch (checkTag) {
          case 'S001-1':
            return '待审核';
          case 'S001-2':
            return '未通过';
          case 'S001-3':
            return '已通过';
          default:
            return checkTag;
        }
      },
    },
    mounted() {
      this.initTable();
    }
  };
</script>

<style scoped>
.demo-form-inline {
  margin-bottom: 20px;
}
.el-table {
  margin-top: 20px;
}
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
.el-table >>> .el-table__header tr th {
  background-color: lightgray;
  color: black;
}
</style>
